<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入样式 -->
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<!-- 引入组件库 -->
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<!-- <script type="text/javascript" src='js/xlsx.full.min.js' charset="utf-8"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app">
			<div>
				<p>复制文本，点击下面的按钮来提取信息：</p>
				<textarea cols="50" rows="20" id='textarea' placeholder="请输入" v-model="textareaInput">
				</textarea>
				<button @click="myFunction()" style="line-height: 30px; margin-left: 10px;">1、点击这里提取信息</button>
			</div>
			<div style="display: flex; align-items: center; margin-top: 30px;">
				<table border="1px" style="border-collapse: collapse;" width="100%">
					<caption>开票信息</caption>
					<thead style="background-color: orange; color: #fff;">
						<tr>
							<th v-for="(item,index) in tableData" :key="index">{{item.name}}</th>
						</tr>
					</thead>
					<tbody id="tbodyText" style="background-color: #eee;">
						<tr>
							<th v-for="(item,key) in obj" :key="key + 'a'">
								<textarea type="text" v-model="obj[key]" placeholder="可以输入修改" 
								style="height: 60px; width: 90%;" @input="inputInput">
								</textarea>
							</th>
						</tr>
					</tbody>
				</table>
				<button @click="tableExcelData()" style="margin-left: 30px;line-height: 30px;">2、信息核查正确，点击这里确认添加表格中</button>	
			</div>
			
			<!-- <input type="text" v-model="obj.obj1"  style="line-height: 20px;" @input="inputInput"/> -->
			
			<div style="display: flex; align-items: center; margin-top: 30px;">
				<table border="1px" style="border-collapse: collapse;" width="100%" id="tableExcel">
					<caption>开票信息</caption>
					<thead>
						<tr>
							<th v-for="(item,index) in tableData" :key="index">{{item.name}}</th>
						</tr>
					</thead>
					<tbody id="tbody">
						
					</tbody>
				</table>
				<button @click="exportToExcel()" style="margin-left: 30px;line-height: 30px;">3、导出EXCLE</button>
			</div>
			
		</div>
		<script>
			var base64 = function(excelFile) {
			    return window.btoa(unescape(encodeURIComponent(excelFile)))
			};
			var tableToExcel = function(tableid, sheetName) {
			    var uri = 'data:application/vnd.ms-excel;base64,';
			    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
			        'xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
			        + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
			        + '</x:ExcelWorkbook></xml><![endif]-->' +
			        '</head><body ><table class="excelTable" style="vnd.ms-excel.numberformat:@">{table}</table></body></html>';

			    if (!tableid.nodeType) tableid = document.getElementById(tableid);
			    tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')
			    var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
			    var a = document.createElement("a");
			    a.download = sheetName + ".xls";
			    a.href = uri + this.base64(this.format(template, ctx));;
			    a.click();
			};
			var format = function (s, c) {
			    return s.replace(/{(\w+)}/g,
			        function (m, p) {
			            return c[p];
			        });
			};
			const App = {
				data() {
					return {
						objitem:'1212',
						textareaInput: '',
						list: [],
						obj:{},
						// 表格开头
						tableData:[
							{
								name:'序号',
								or:[],
								and:[],
							},
							{
								name:'发布日期',
								or:[],
								and:[],
							},
							{
								name:'发布人',
								or:[],
								and:[],
							},
							{
								name:'名称',//主名字
								or:['公司抬头','抬头','名称','公司名称'],//或
								and:[],//与
							},
							{
								name:'税号',
								or:['纳税人识别号','信用代码','税号'],//或
								and:['税','号'],//与
							},
							{
								name:'单位地址',
								or:['单位地址','公司地址','地址','地址及电话','地址、电话'],
								and:[],
								merge:['电话','手机电话','单位电话']
							},
							{
								name:'开户行及账号',
								or:['开户银行','开户行','银行','银行及账号'],
								and:[],
								merge:['开户账号','银行账号','账号']
							},
							{
								name:'开票类型',
								or:['类型','开票类型'],
								and:[],
							},
							{
								name:'开票内容',
								or:[],
								and:[],
							},
							{
								name:'开票金额',
								or:['开票金额','金额'],
								and:[],
							},
							{
								name:'备注信息',
								or:['备注信息','备注','车牌号'],
								and:[],
							}
						],
					}
				},
				mounted() {
					this.textareaInput = `发布人:小刘
							公司抬头:上海东芙汽车配件有限公司
							信用代码:91310120798991316C91310120798991316C91310120798991316C91310120798991316C91310120798991316C91310120798991316C
							单位地址:上海市奉贤区柘林镇新申工业园区平林支路4号
							单位电话：57493713
							开户行及账号:上海银行南西支行316502-03000305738
							开户账号:上海银行南西支行
							开票内容：保养
							开票金额：595
							备注信息：沪FAC298`
				},
				methods: {
					inputInput(e){
						// console.log(this.objitem)
						// console.log(this.obj)
					},
					exportToExcel() {
						tableToExcel("tableExcel","开票信息");
					},
					myFunction() {
						this.obj = {}
						// this.$Id('tbodyText').innerHTML = ''
						if(!this.textareaInput) return alert('请输入文本');
						let valueList = this.textareaInput.split('\n')
						
						console.log(valueList);
						for (var j = 0; j < this.tableData.length; j++) {
							this.obj[`obj${j}`] = ''
							
							// 一样的名字
							for (var i = 0; i < valueList.length; i++) {
								if (valueList[i].indexOf(this.tableData[j]['name']) != -1) {
									if (valueList[i].indexOf(':') != -1) this.obj[`obj${j}`] = valueList[i].split(':')[1] || ''
									if (valueList[i].indexOf('：') != -1) this.obj[`obj${j}`] = valueList[i].split('：')[1] || ''
								}
							}
							
							// 或 ||
							if(this.tableData[j].or.length > 0){
								for (var b = 0; b < valueList.length; b++) {
									for (var p = 0; p < this.tableData[j].or.length; p++) {
										if(valueList[b].indexOf(this.tableData[j]['or'][p]) != -1){
											if (valueList[b].indexOf(':') != -1) this.obj[`obj${j}`] = valueList[b].split(':')[1] || '' //英文:
											if (valueList[b].indexOf('：') != -1) this.obj[`obj${j}`] = valueList[b].split('：')[1] || '' //中文：
										}
									}
								}
							}
							
							// 与 &&
							if(this.tableData[j].and.length > 0){
								for (var a = 0; a < valueList.length; a++) {
									let num = 0
									for (var k = 0; k < this.tableData[j].and.length; k++) {
										if(valueList[a].indexOf(this.tableData[j]['and'][k]) != -1){
											num++
										}
									}
									if(num == this.tableData[j].and.length){
										if (valueList[a].indexOf(':') != -1) this.obj[`obj${j}`] = valueList[a].split(':')[1] || '' //英文:
										if (valueList[a].indexOf('：') != -1) this.obj[`obj${j}`] = valueList[a].split('：')[1] || '' //中文：
									}
								}
							}
							
							// 数据不全的进行合并
							if(this.tableData[j].merge){
								let state = false
								for (var d = 0; d < this.tableData[j].merge.length; d++) {
									for (var c = 0; c < valueList.length; c++) {
										if(valueList[c].indexOf(this.tableData[j]['merge'][d]) != -1){
											if (valueList[c].indexOf(':') != -1){
												if(this.obj[`obj${j}`].indexOf(valueList[c].split(':')[1]) == -1){
													this.obj[`obj${j}`] += ' ' + valueList[c].split(':')[1] || '' //英文:
												}
											} 
											if (valueList[c].indexOf('：') != -1){
												if(this.obj[`obj${j}`].indexOf(valueList[c].split('：')[1]) == -1){
													this.obj[`obj${j}`] += ' ' + valueList[c].split('：')[1] || '' //中文：
												}
											} 
											state = true
											break;
										}
									}
									if(state) break;
								}
							}
							
						}
						console.log(this.obj);
						
						
						// let html = '<tr align="center">'
						// for(let key in this.obj){
						// 	html+=`<td>` + this.obj[key] +`</td>`
						// }
						// html += '</tr>'
						// this.$Id('tbodyText').innerHTML = html
					},
					tableExcelData(){
						console.log(this.obj);
						if(JSON.stringify(this.obj) === '{}') return alert('请点击这里提取信息');
						let obj = JSON.parse(JSON.stringify(this.obj))
						this.list.push(obj)
						this.tbodyHtml('tbody')
					},
					tbodyHtml(id) {
						let html = ''
						for (var i = 0; i < this.list.length; i++) {
							html += '<tr align="center">'
								for(let key in this.list[i]){
									html +=`<td>` + this.list[i][key] +`</td>`
								}
							html += '</tr>'
						}
						console.log(html)
						this.$Id(id).innerHTML = html
					},
					$Id(id) {
						return document.getElementById(id)
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>